<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2.0module language</title>
    <script src="../static/vue.min.js"></script>
    <script src="../static/jquery.js"></script>
    <style>
        .bgClass{
            background: black;
            color: white;
        }
    </style>
</head>
<body>
<!--插值-->
<div id="app">
    <!--文本插值-->
    {{textmessage}}
    <!--v-html指令用于输出html代码-->
    <div v-html="htmlmessage"></div>
    <!--v-bind指令绑定属性值-->
    <label for="c1">修改颜色</label><input type="checkbox" v-model="modifyBg" id="c1">
    <div v-bind:class="{'bgClass':modifyBg}">v-bind:class 指令</div>
    <!--表达式-->
    {{5+5}}<br>
    {{ok?'yes':'no'}}<br>
    {{textmessage.split('').reverse().join('-')}}
    <div v-bind:id="'list-'+id">凌风学长</div>
</div>
<hr>
<!--指令-->
<div id="order">
    <!--if指令-->
    <p v-if="seen">可以看到</p>
    <pre><a v-bind:href="url">凌风学长</a></pre>
    <a v-on:click="doSomething">doSomething</a>
    <!--用户输入-->
    <input v-model="userInput" v-on:change="change">
    <!--字符串反转-->
    <p>{{userInput}}</p>
    <button v-on:click="reverseMessage">反转字符串</button><br>
    <!--过滤器-->
    {{userInput|capitalize}}
    <div v-bind:id="rawId|formatId">在指令中使用</div>
    <!--过滤器创联-->
    {{userInput|filterA|filterB}}<br>
    <!--过滤器接受多个阐述-->
    {{userInput|filterC('arg1',arg2)}}
    <!--这里，userInput 是第一个参数，字符串 'arg1' 将传给过滤器作为第二个参数， arg2 表达式的值将被求值然后传给过滤器作为第三个参数。-->
</div>
<script type="text/javascript">

    var order=new Vue({
        el:"#order",
        data:{
            seen:true,
            url:"http://www.lfsenior.cn",
            userInput:"lfsenior",
            rawId:3,
            arg2:'filterC'
        },
        methods:{
            doSomething:function () {
                alert(123);
            },
            change:function () {
                console.log(this.userInput);
            },
            reverseMessage:function () {
                this.userInput=this.userInput.split('').reverse().join('');
            }
        },
        filters:{
            capitalize:function (value) {
                if(!value) return '';
                value=value.toString();
                return value.charAt(0).toUpperCase()+value.slice(1)
            },
            formatId:function (value) {
                if(value>2){
                    return 10086;
                }
                return -10086;
            },
            filterA:function (value) {
                return value+'A';
            },
            filterB:function (value) {
                return value+'B';
            },
            filterC:function (value,value2,value3) {
                return value+value2+value3;
            }
        }
    });
    var vm=new Vue({
        el:"#app",
        data:{
            textmessage:'LFSenior',
            htmlmessage:'<h1>LFSenior</h1>',
            modifyBg:false,
            ok:true,
            id:1
        }
    });
</script>
</body>
</html>